<!--  -->
<template>
  <div>
    <cu-custom
      :bgImage="bgImage"
      :needBack="true"
      bgColor="bgNormal"
      topTitle="消息详情"
      titleClass="commTitleWhite"
      backIconColor="#fff"
    ></cu-custom>
    <view class="content" :style="{ height: getHeight() }">
      <view class="">
        <view class="title">{{ detail.title }}</view>
        <view class="context">{{ detail.content }}</view>
      </view>
    </view>
  </div>
</template>

<script>
import { readMessage, getMessageDetail } from "@/api/workBench";
export default {
  data() {
    return {
      detail: [],
    };
  },
  onLoad(options) {
    console.log(options);
    this.getDetail(options);
    this.readMessage(options);
    this.getHeight();
  },
  methods: {
    readMessage(data) {
      readMessage(data.id).then((res) => {
        if (res.code == 200) {
        } else {
          uni.showToast({
            title: res.msg,
            icon: "none",
          });
        }
      });
    },
    getDetail(data) {
      getMessageDetail(data.id).then((res) => {
        if (res.code == 200) {
          this.detail = res.data;
        } else {
          uni.showToast({
            title: res.msg,
            icon: "none",
          });
        }
      });
    },
    getHeight() {
      return `calc(100vh - ${this.CustomBar}px)`;
    },
  },
  components: {},
};
</script>
<style lang="scss" scoped>
.content {
  background: #f2f2f2;
  font-size: 28rpx;
  color: #999;
  overflow-y: scroll;
  & > view {
    padding: 58rpx 40rpx 67rpx;
    background: #fff;

    .title {
      color: #333;
      font-weight: 500;
      text-align: center;
    }
    .context {
      margin-top: 41rpx;
    }
  }
}
</style>
